<template>
  <!-- 导航栏 -->
  <van-nav-bar title="注册" left-text="返回" left-arrow @click="onClickLeft" />

  <!-- 图片 -->
  <img class="register_img1" src="../../assets/img/login.jpg" alt="">

  <!-- 表单 -->
  <van-form @submit="onSubmit">
    <van-popup v-model:show="showCenter" duration="0.3" round :style="{ padding: '64px' }">{{ text }}</van-popup>
    <van-cell-group inset>
      <van-field v-model="phone" name="phone" label="手机号码" placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请填写用户名' }]" />

      <van-field v-model="nickname" name="nickname" label="用户昵称" placeholder="请输入用户昵称"
        :rules="[{ required: true, message: '请输入用户昵称' }]" />
      <van-field v-model="testcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <template #button>
          <van-button v-if="times === 0" @click="startTimer()" size="small" type="primary">发送验证码</van-button>
          <div v-else>{{ times }}之后再发送</div>
        </template>
      </van-field>
      <!-- <div class="testcodebox">
        <van-field v-if="isClick"  v-model="testcode" name="testcode" label="验证码" placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]" />
        <van-button v-else class="testcode03" @click="again()" type="default" size="small" round="true">点击发送验证码</van-button>
        <van-button v-show="isClick" @click="again2()" :disabled="Boolean(times)" class="testcode02"  plain type="primary" size="mini">{{times > 0 ? times + 's' : '再次获取'}}</van-button>
      </div> -->
      <van-field v-model="password" type="password" name="password" label="登录密码" placeholder="请输入登录密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" @click="toRegister">
        注册
      </van-button>
    </div>
  </van-form>
  <CopyRight></CopyRight>
</template>




<script>
import axios from 'axios'
import { showDialog } from 'vant'; // 引入弹窗的方法

import router from '@/router';
import CopyRight from '../../zujian/copyRight.vue'
export default {
  data() {
    return {
      text: '发送成功',
      phone: '17858984792',
      password: '123456',
      nickname: '王某人十二点必睡觉',
      testcode: '',
      isClick: false,
      times: 0,
      showCenter: false
    }
  },
  methods: {
    onClickLeft(){
            history.back()
        },
    startTimer() {
      this.times = 60; // 给定一个初始时间
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          clearInterval(this.timer); // 清理定时器
        }
      }, 1000);
    },
    async toRegister() { // 提交函数
      if(!this.testcode){
        return showDialog({ message: '请输入验证码' });

      }
      const res = await axios.post('http://localhost:6001/create/member', {
        $uniq:'phone',
        phone: this.phone,
        verifyCode: this.verifyCode,
        password: this.password,
        name: this.nickname,
      });
      const data = res.data; // 这个就是我们在mock的回调中返回的数据
      // console.log(data);
      if (!data.success) {
        this.text = data.message
        this.showCenter = true
        this.timeId2 = setTimeout(() => {
          this.showCenter = false
        }, 700)
        return
      }
      // console.log(data);
      this.text = '注册成功,跳转至登录页'
      this.showCenter = true
      this.timeId2 = setTimeout(() => {
        this.showCenter = false
        // this.$router.push('/login')
        this.$router.push({ path:'/login',query:{phone:this.phone} })
      }, 700)

    }
  },
  computed: {

  },
  components: {
    CopyRight
  },
  beforeUnmount() {
    clearInterval(this.timer); // 清理定时器
  },
};
</script>




<style scoped>
.register_img1 {
  width: 100%;
}

/* .testcodebox{
  position: relative;
}
.testcode02{

position: absolute;
width: 58px;
height: 24px;
right: 0;
top: 10px;
}
.testcode03{
  margin: 10px 10px;
} */
</style>
